/*说明：本学成网页面模板在网上已有源码，
但该模板未使用原网站的源码，并不是由原模板源码改造而来
本模板由个人开发，图片资源和原网站使用的是同一套，
但未使用原模板的源码，QQ：2781639872 2020年4月13日13:00*/
* {
	/*定义所有的边距为0*/
	margin:0;
	outline: none;
}
.box {
	/*设置让电脑的显示大小无论怎么变，网页主体一直居中*/
	width: 1349px;
	height: 100%;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
ul {
	/*去掉所有ul自带的内边距*/
	padding: 0 0;
}
								/*顶部导航栏开始*/
.dbdh {
	/*顶部导航栏*/
	width: 100%;
	height: 100px;
	background-color: #F3F5F7;
}
.logo {
	/*logo*/
	background-image: url(../image/logo.png);
	width: 196px;
	height: 42px;
	float: left;
	margin-left: 76px;
	margin-top: 30px;
	margin-right: 40px;
}
.logo a {
	/*设置logo的跳转链接*/
	display: inline-block;
	width: 196px;
	height: 42px;
}
.an {
	/*顶部的按钮*/
	float: left;
	width: 330px;
	height: 42px;
	margin-top: 30px;
}
.an a {
	/*按钮盒子*/
	height: 42px;
	float: left;
	display: inline-block;
	text-decoration: none;
	line-height: 42px;
	color: #000;
	padding: 0 20px;
	font-size: 18px;
}
.an a:hover {
	/*定义鼠标经过按钮上面的变化*/
	border-bottom: solid 1px #0BA7FA;
}
.grzx {
	font-size: 14px;
	position: relative;
	top: 39px;
	left: 10px;
	text-decoration: none;
	color: #000;
}
.grzx:hover {
	color: #00A4FF;
}
.yh {
	/*用户头像*/
	float: right;
	position: relative;
	top: 35px;
	left: -72px;
	/*设置头像旋转速度*/
	-webkit-transition: 1s;
}
.yh:hover {
	/*设置用户头像旋转*/
	-webkit-transform: rotateZ(360deg);
}
.tz {
	/*通知*/
	float: right;
	position: relative;
	top: 42px;
	left: -125px;
}
.tz-hd {
	/*设置通知图标上面的红点*/
	width: 6px;
	height: 6px;
	position: relative;
	top: 26px;
	left: 30px;
	background-color: red;
	display: inline-block;
	border-radius: 100%;
}
.yhm {
	/*用户名称*/
	display: inline-block;
	text-decoration: none;
	color: #000;
	line-height: 42px;
	float: right;
	position: relative;
	top: 29px;
	left: 28px;
	font-size: 12px;
}
.yhm:hover {
	/*鼠标经过时用户名称变化*/
	color: #00A4FF;
}
.ss {
	/*搜索栏*/
	float: left;
	width: 360px;
	height: 36px;
	margin-top: 32px;
}
.srk {
	/*输入框*/
	width: 360px;
	height: 36px;
	border: solid 1px #7FCEFD;
	margin-left: 82px;
	font-size: 14px;
}
.sstp {
	/*搜索图片按钮*/
	float: left;
	width: 50px;
	height: 36px;
	margin-top: 32px;
	margin-left: 80px;
}
								/*顶部导航栏结束*/
								/*顶部导航栏下的列表开始*/
.dhlxbj ul li {
	/*去掉无序列表的原有样式*/
	list-style: none;
}
.dhlxbj {
	/*导航栏下面的盒子*/
	width: 100%;
	height: 420px;
	background: #1C036B url(../image/db.jpg) no-repeat top center;
}
.dhlz {
	/*左边的导航栏*/
	width: 190px;
	height: 408px;
	background: rgba(0,0,0,.3);
	float: left;
	margin-left: 65px;
	padding: 6px 0;
	padding-left: 45px;
}
.dhlz span {
	/*设置浮动调整位置*/
	float: right;
}
.dhlz a {
	/*设置a标签的大小*/
	width: 150px;
	height: 45px;
	display: inline-block;
	text-decoration: none;
	color: #fff;
	line-height: 45px;
	/*设置鼠标经过a标签时a标签向右变化的速度*/
	transition: all 0.4s;
}
.dhlz a:hover {
	/*定义鼠标经过a标签时的变化*/
	transform:translateX(3px);
	color: #04B6FE;
}
		/*中间的跑马灯按钮开始*/
.dhl-pmd {
	/*跑马灯盒子*/
	width: 216px;
	height: 10px;
	position: relative;
	top: 387px;
	left: 541px;
}
.dhl-pmd li a {
	/*跑马灯按钮*/
	display: inline-block;
	width: 12px;
	height: 10px;
	background: rgba(255,255,255,.4);
	position: relative;
	top: -427px;
	left: 57px;
	border-radius: 100%;
	transition: all 0.5s;
}
.dhl-pmd li a:hover {
	/*设置鼠标经过时的效果*/
	background-color: #fff;
	border-radius: 10px;
	width: 20px;
}
.dhl-pmd li {
	/*把按钮小盒子转换*/
	display: inline-block;
}
		/*中间跑马灯结束*/
		/*立即学习按钮*/
.dhl-xx {
	/*立即学习跳转链接*/
	display: inline-block;
	width: 80px;
	height: 27px;
	position: relative;
	top: 274px;
	left: 305px;
}
.dhly {
	/*右边的列表*/
	width: 228px;
	height: 300px;
	float: right;
	background-color: #fff;
	margin-top: 58px;
	margin-right: 65px;
	/*设置鼠标经过课程盒子时盒子向上变化的速度*/
	transition: all 0.4s;
}
.dhly:hover {
	/*导航栏下面的盒子的右边的列表的特效*/
	transform:translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,.8)
}
.ys1 {
	/*设置列表中的第一条列表*/
	width: 228px;
	height: 60px;
	background-color: #9BCEEB;
}
.ys1 a {
	/*设置列表第一条字体*/
	margin-left: 60px;
	font-size: 20px;
	line-height: 60px;
	font-weight: bold;
	color: #fff;
}
.ys2,.ys3,.ys4,.ys5 {
	/*设置右边列表里li*/
	width: 194px;
	height: 60px;
	margin: 0 17px;
}
/*列表的第二条*/
.ys2 a {
	/*第二条去掉下划线*/
	text-decoration: none;
}
.ys2 {
	/*添加边框*/
	border-bottom: solid 1px #A5A5A5;
}
.ys2d {
	/*第二条的大字*/
	font-size: 18px;
	color: #000;
	line-height: 45px;
	/*设置定位，不给值，为后面的定位做铺垫*/
	position: absolute;
}
.ys2x {
	/*设置第二条的小字*/
	font-size: 8px;
	color: #A5A5A5;
	/*设置定位调整位置*/
	position: relative;
	top: 8px;
	left: 0;
}
/*列表的第三条*/
.ys3 a {
	/*第三条去掉下划线*/
	text-decoration: none;
}
.ys3 {
	/*添加边框*/
	border-bottom: solid 1px #A5A5A5;
}
.ys3d {
	/*第三条的大字*/
	font-size: 18px;
	color: #000;
	line-height: 45px;
	/*设置定位，不给值，为后面的定位做铺垫*/
	position: absolute;
}
.ys3x {
	/*设置第三条的小字*/
	font-size: 8px;
	color: #A5A5A5;
	/*设置定位调整位置*/
	position: relative;
	top: 30px;
	left: 0;
}
/*列表的第四条*/
.ys4 a {
	/*第四条去掉下划线*/
	text-decoration: none;
}
.ys4 {
	/*添加边框*/
	border-bottom: solid 1px #A5A5A5;
}
.ys4d {
	/*第四条的大字*/
	font-size: 18px;
	color: #000;
	line-height: 45px;
	/*设置定位，不给值，为后面的定位做铺垫*/
	position: absolute;
}
.ys4x {
	/*设置第四条的小字*/
	font-size: 8px;
	color: #A5A5A5;
	/*设置定位调整位置*/
	position: relative;
	top: 30px;
	left: 0;
}
/*第五条，也就是按钮*/
.ys5an {
	display: inline-block;
	width: 139px;
	height: 40px;
	margin-top: 8px;
	border: solid 1px #22B1FD;
	text-decoration: none;
	color: #22B1FD;
	font-size: 18px;
	line-height: 40px;
	padding-left: 55px;
}
/*设置二到四条列表里的字体鼠标经过变化*/
.ys4d:hover {
	color: #26AFFE;
}
.ys2d:hover {
	color: #26AFFE;
}
.ys3d:hover {
	color: #26AFFE;
}
/*设置第五条里按钮鼠标经过时的变化*/
.ys5an:hover {
	background-color: #26AFFE;
	color: #fff;
}
									/*顶部导航栏下的列表结束*/
									/*中间主体区域开始*/
.zjzt {
	/*中间主体的大盒子*/
	width: 1219PX;
	height: 1380px;
	background-color: #F3F5F7;
	padding: 0 65PX;
}
.zjzt-dhl {
	/*中间主体区域的顶部导航栏*/
	width: 1220px;
	height: 60px;
	background-color: #fff;
	margin-top: 10px;
	float: left;
	box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px;
	/*设置定位，不给值，为后面的定位做铺垫*/
	position: absolute;
	/*设置鼠标经过中间区域顶部导航栏时向上移动的速度*/
	transition: all 0.4s;
}
.zjzt-dhl:hover {
	/*鼠标经过顶部导航栏时的效果*/
	transform:translateY(-1px);
	box-shadow: 0 10px 10px rgba(0,0,0,.3)
}
.zjzt-dhl a {
	/*设置导航栏里的链接字体居中*/
	line-height: 60px;
}
.zjzt-dhl-zt1 {
	/*设置导航栏里的第一个链接*/
	font-weight: bold;
	color: #00A4FF;
	position: relative;
	top: 0;
	left: 31px
	}
.zjzt-dhl-zt2 {
	/*设置导航栏里的第二个链接*/
	position: relative;
	top: 0;
	left: 56px
}
.zjzt-dhl-zt3 {
	/*设置导航栏里的第三个链接*/
	position: relative;
	top: 0;
	left: 75px
}
.zjzt-dhl-zt4 {
	/*设置导航栏里的第四个链接*/
	position: relative;
	top: 0;
	left: 91px
}
.zjzt-dhl-zt5 {
	/*设置导航栏里的第五个链接*/
	position: relative;
	top: 0;
	left: 114px
}
.zjzt-dhl-zt6 {
	/*设置导航栏里的第六个链接*/
	position: relative;
	top: 0;
	left: 139px
}
.zjzt-dhl-zt7 {
	/*设置导航栏里的第七个链接*/
	position: relative;
	top: 0;
	left: 173px
}
.zjzt-dhl-zt8 {
	/*设置导航栏里的第八个链接*/
	position: relative;
	top: 0;
	left: 205px
}
.zjzt-dhl-zt9 {
	/*设置导航栏里的第九个链接*/
	position: relative;
	top: 0;
	left: 236px
}
.zjzt-dhl-zt10 {
	/*设置导航栏里的第十个链接*/
	position: relative;
	top: 0;
	left: 259px
}
.zjzt-dhl-zt11 {
	/*设置导航栏里的第十一个链接*/
	position: relative;
	top: 0;
	left: 293px
}
.zjzt-dhl-zt12 {
	/*设置导航栏里的第十二个链接*/
	position: relative;
	top: 0;
	left: 324px
}
.zjzt-dhl-zt13 {
	/*设置导航栏里的第十三个链接*/
	position: relative;
	top: 0;
	left: 352px
}
.zjzt-dhl-zt14 {
	/*设置导航栏里的第十四个链接*/
	float: right;
	margin-right: 30px;
	text-decoration: none;
	color: #00A4FF;
	font-size: 14px;
}
.zjzt-dhl-zt3,
.zjzt-dhl-zt5,
.zjzt-dhl-zt7,
.zjzt-dhl-zt9,
.zjzt-dhl-zt11,
.zjzt-dhl-zt13 {
	/*去掉这些链接的下划线*/
	text-decoration: none;
	color: #000;
}
/*设置鼠标经过时的特效*/
.zjzt-dhl-zt3:hover {
	color: #00A4FF;
}
.zjzt-dhl-zt5:hover {
	color: #00A4FF;
}
.zjzt-dhl-zt7:hover {
	color: #00A4FF;
}
.zjzt-dhl-zt9:hover {
	color: #00A4FF;
}
.zjzt-dhl-zt11:hover {
	color: #00A4FF;
}
.zjzt-dhl-zt13:hover {
	color: #00A4FF;
}
.zjzt-dhl-zt14:hover {
	color: #000;
}
/*结束*/
.zjzt-kcmc-1 {
	/*课程标题盒子一*/
	width: 1220px;
	height: 21px;
	float: left;
	margin-top: 100px;
}
.zjzt-kcmc2 {
	/*课程跳转链接一右边*/
	float: right;
	text-decoration: none;
	color: #A5A5A5;
	font-size: 12px;
}
.zjzt-kcmc2:hover {
	/*设置跳转链接一右边*/
	color: #000;
}
.zjzt-kc-1 {
	/*设置课程视频*/
	width: 1220px;
	height: 270px;
	float: left;
	margin-top: 10px;
	margin-bottom: 13.75px;
}
.zjzt-kc-1 ul li {
	/*设置单个课程页面的大小*/
	width: 225px;
	height: 270px;
	display: inline-block;
	float: left;
	/*设置鼠标经过课程盒子时盒子向上变化的速度*/
	transition: all 0.4s;
}
.zjzt-kc1 {
	/*设置第一个课程的图片页面*/
	width: 225px;
	height: 155px;
	float: left;
	overflow: hidden;
}
.zjzt-kc-lj1 {
	/*课程第一个课程的页面下面的标题*/
	width: 225px;
	height: 115px;
	background-color: #fff;
	float: left;
}
.zjzt-kc-kb {
	/*设置每个课程盒子间的间距*/
	width: 23.75px;
	height: 270px;
	float: left;
}
.zjzt-kc-mc1 {
	/*设置课程盒子中下面的课程名称*/
	text-decoration: none;
	font-size: 14px;
	margin-left: 18px;
	margin-top: 10px;
	float: left;
	color: #000;
}
.zjzt-kc-mc1:hover {
	/*设置课程盒子中下面的课程名称鼠标经过时的变化*/
	color: #22B1FD;
}
.zjzt-kc-mc2 {
	/*设置课程盒子中最下面的文字*/
	float: left;
	margin-top: 20px;
	margin-left: 18px;
	font-size: 12px;
	color: #A5A5A5;
}
.zjzt-kc-mc2 span {
	/*设置课程盒子中最下面的文字中的级别文字样式*/
	color: #ff7c2d;
	font-size: 14px;
}
.zjzt-kc-1 li:hover{
	/*设置课程盒子鼠标经过时盒子的特效*/
	transform:translateY(-5px);
	box-shadow: 0 10px 10px rgba(0,0,0,.3)
}
.zjzt-kc1 img:hover{
	/*设置课程盒子中的图片页面鼠标经过时的特效*/
	transform:translateX(-5px);
	box-shadow: 0 10px 10px rgba(0,0,0,.3)
}
.zjzt-kc1 img {
	/*设置课程盒子中的图片页面鼠标经过时特效的速度*/
	transition: all 0.4s;
}
.zjzt-kcmc-2 {
	/*课程标题盒子二*/
	width: 1220px;
	height: 21px;
	float: left;
	margin-top: 32px;
}
									/*中间主体区域结束*/
									/*底部导航栏开始*/
.dbdhl {
	/*设置底部导航栏盒子*/
	width: 1219px;
	height: 236px;
	float: left;
	background-color: #fff; 
}
.dbdhl li {
	/*去掉自带样式*/
	list-style: none;
}
.dbdhl-xx1 {
	/*设置底部导航栏盒子里的信息列表一*/
	float: left;
	width: 460px;
	height: 170px;
	margin-left: 100px;
	margin-top: 46px;
}
.dbdhl-xx1-t1 {
	/*底部导航栏盒子里的信息列表一里的第一条*/
	width: 195px;
	height: 42px;
	background-image: url(../image/dblogo.png);
	float: left;
}
.dbdhl-xx1-t1-lj{
	/*设置底部logo跳转链接*/
	display: inline-block;
	width: 195px;
	height: 42px;
	float: left;
}
.dbdhl-xx1-t2 {
	/*底部导航栏盒子里的信息列表一里的第二条*/
	width: 432px;
	height: 12px;
	float: left;
	margin-top: 40px;
	line-height: 12px;
	font-size: 12px;
}
.dbdhl-xx1-t3 {
	/*底部导航栏盒子里的信息列表一里的第三条*/
	width: 432px;
	height: 12px;
	float: left;
	margin-top: 6px;
	line-height: 12px;
	font-size: 12px;
}
.dbdhl-xx1-t4 {
	/*底部导航栏盒子里的信息列表一里的第四条*/
	width: 120px;
	height: 35px;
	float: left;
	margin-top: 28px;
	border: solid 1px #22B1FD;
}
.dbdhl-xx1-t4-an {
	/*底部导航栏盒子里的信息列表一里的第四条里的按钮*/
	width: 85px;
	height: 35px;
	display: inline-block;
	line-height: 35px;
	text-decoration: none;
	font-size: 12px;
	color: #22B1FD;
	padding-left: 35px;
}
.dbdhl-xx1-t4-an:hover {
  	/*底部导航栏盒子里的信息列表一里的第四条里的按钮鼠标经过的特效*/
	background-color: #22B1FD;
	color: #fff;
}
.dbzt {
	/*设置顶部导航栏里的字体颜色*/
	color: #A5A5A5;
}
.dbdhl-xx2 {
	/*设置底部导航栏盒子里的信息列表二*/
	width: 90px;
	height: 136px;
	float: right;
	margin-top: 30px;
	margin-right: 303px;
}
.dbdhl-xx3 {
	/*设置底部导航栏盒子里的信息列表三*/
	width: 96px;
	height: 136px;
	float: right;
	margin-top: 30px;
	margin-right: -276px;
}
.dbdhl-xx4 {
	/*设置底部导航栏盒子里的信息列表二*/
	width: 90px;
	height: 136px;
	float: right;
	margin-top: 30px;
	margin-right: -437px;
}
.dbdhl a {
	/*设置底部导航栏跳转链接的样式*/
	text-decoration: none;
	color: #A5A5A5;
	font-size: 12px;
}
.dbdhl h4 {
	/*设置底部导栏跳转链接上的标题样式*/
	padding-bottom: 10px;
}
.dbdhl-xx2 a:hover {
	/*设置底部导航栏二跳转链接鼠标经过时的特效*/
	color: #000;
}
.dbdhl-xx3 a:hover {
	/*设置底部导航栏三跳转链接鼠标经过时的特效*/
	color: #000;
}
.dbdhl-xx4 a:hover {
	/*设置底部导航栏四跳转链接鼠标经过时的特效*/
	color: #000;
}
										/*底部导航栏结束*/
										/*左侧的导航栏开始*/
html {
	/*设置定位，不给值，为后面的定位做铺垫*/
	position: absolute;
}
.zcdhl {
	/*左侧固定导航栏*/
	width: 60px;
	height: 214px;
	background: rgba(0,0,0,.3);
	/*设置定位调整位置*/
	position: fixed;
	top: 128px;
	left: 0;
	overflow: hidden;
	/*设置鼠标经过导航栏时向上移动的速度*/
	transition: all 0.4s;
}
.zcdhl-ul {
	/*设置列表*/
	list-style: none;
}
.zcdhl-ul li {
	/*设置列表条*/
	width: 60px;
	height: 42.5px;
}
.zcdhl-ul a {
	/*设置列表跳转链接*/
	line-height: 42.5px;
	font-size: 12px;
	display: inline-block;
	width: 60px;
	height: 42.5px;
	text-decoration: none;
	color: #fff;
	padding-left: 4px;
	border-bottom: solid 1px #fff;
}
.zcdhl-ul a:hover {
	color: #00A4FF;
	border-bottom: solid 1px #A5A5A5;
}
.zcdhl:hover {
	transform:translateY(-5px);
	box-shadow: 0 18px 18px rgba(0,0,0,.5)
}
								/*左侧的导航栏结束*/